<template>
  <div class="auth-container">
    <!-- 自定义标题栏 (仅在Electron环境下显示) -->
    <TitleBar v-if="isElectron" />

    <!-- 背景装饰 -->
    <div class="auth-background">
      <div class="bg-pattern"></div>
      <div class="bg-gradient"></div>
    </div>

    <div class="auth-content">
      <!-- 品牌展示区 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <el-icon class="logo-icon"><Folder /></el-icon>
            <h1 class="logo-text">RickPan</h1>
          </div>
          
          <div class="brand-description">
            <h2>找回您的账户</h2>
            <p>通过邮箱验证快速重置密码，保护您的数据安全</p>
            
            <div class="security-features">
              <div class="feature-item">
                <el-icon><Message /></el-icon>
                <span>邮箱验证</span>
              </div>
              <div class="feature-item">
                <el-icon><Lock /></el-icon>
                <span>安全重置</span>
              </div>
              <div class="feature-item">
                <el-icon><CircleCheck /></el-icon>
                <span>数据保护</span>
              </div>
            </div>
            
            <div class="help-info">
              <h3>安全提示</h3>
              <ul>
                <li>验证码有效期为10分钟</li>
                <li>请确保邮箱地址正确</li>
                <li>检查垃圾邮件文件夹</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 忘记密码表单区 -->
      <div class="form-section">
        <div class="form-container theme-card">
          <!-- 主题切换按钮 -->
          <div class="theme-toggle">
            <el-tooltip :content="themeStore.isDark ? '切换到日间模式' : '切换到夜间模式'" placement="left">
              <el-button
                text
                circle
                @click="themeStore.toggleTheme()"
                class="theme-toggle-btn"
              >
                <el-icon>
                  <Sunny v-if="themeStore.isDark" />
                  <Moon v-else />
                </el-icon>
              </el-button>
            </el-tooltip>
          </div>

          <!-- 步骤指示器 -->
          <div class="steps-indicator">
            <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
              <div class="step-number">1</div>
              <div class="step-label">验证邮箱</div>
            </div>
            <div class="step-divider"></div>
            <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
              <div class="step-number">2</div>
              <div class="step-label">输入验证码</div>
            </div>
            <div class="step-divider"></div>
            <div class="step" :class="{ active: currentStep >= 3 }">
              <div class="step-number">3</div>
              <div class="step-label">重置密码</div>
            </div>
          </div>

          <!-- 步骤1: 邮箱验证 -->
          <div v-if="currentStep === 1" class="step-content">
            <div class="form-header">
              <h2>验证您的邮箱</h2>
              <p>请输入您注册时使用的邮箱地址</p>
            </div>
            
            <el-form
              ref="emailFormRef"
              :model="emailForm"
              :rules="emailRules"
              size="large"
              class="auth-form"
              @submit.prevent="sendVerificationCode"
            >
              <el-form-item prop="email">
                <div class="input-wrapper">
                  <label class="input-label">邮箱地址</label>
                  <el-input
                    v-model="emailForm.email"
                    placeholder="请输入您的邮箱地址"
                    :prefix-icon="Message"
                    clearable
                    class="theme-input"
                  />
                </div>
              </el-form-item>
              
              <el-form-item>
                <el-button
                  type="primary"
                  size="large"
                  :loading="loading"
                  @click="sendVerificationCode"
                  class="submit-btn theme-button-primary"
                >
                  <span v-if="!loading">
                    <el-icon><Right /></el-icon>
                    发送验证码
                  </span>
                  <span v-else>
                    发送中...
                  </span>
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 步骤2: 验证码输入 -->
          <div v-if="currentStep === 2" class="step-content">
            <div class="form-header">
              <h2>输入验证码</h2>
              <p>验证码已发送至 <strong>{{ maskedEmail }}</strong></p>
            </div>
            
            <el-form
              ref="codeFormRef"
              :model="codeForm"
              :rules="codeRules"
              size="large"
              class="auth-form"
              @submit.prevent="verifyCode"
            >
              <el-form-item prop="code">
                <div class="input-wrapper">
                  <label class="input-label">验证码</label>
                  <el-input
                    v-model="codeForm.code"
                    placeholder="请输入6位验证码"
                    :prefix-icon="Key"
                    clearable
                    maxlength="6"
                    class="theme-input code-input"
                    @keyup.enter="verifyCode"
                  />
                </div>
              </el-form-item>
              
              <div class="code-actions">
                <div class="countdown" v-if="countdown > 0">
                  {{ countdown }}秒后可重新发送
                </div>
                <el-button
                  v-else
                  text
                  type="primary"
                  @click="resendCode"
                  :loading="resendLoading"
                  class="resend-btn"
                >
                  重新发送验证码
                </el-button>
              </div>
              
              <el-form-item>
                <div class="button-group">
                  <el-button
                    size="large"
                    @click="goBack"
                    class="back-btn"
                  >
                    <el-icon><ArrowLeft /></el-icon>
                    返回
                  </el-button>
                  <el-button
                    type="primary"
                    size="large"
                    :loading="loading"
                    @click="verifyCode"
                    class="submit-btn theme-button-primary"
                  >
                    <span v-if="!loading">
                      <el-icon><Right /></el-icon>
                      验证
                    </span>
                    <span v-else>
                      验证中...
                    </span>
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <!-- 步骤3: 重置密码 -->
          <div v-if="currentStep === 3" class="step-content">
            <div class="form-header">
              <h2>设置新密码</h2>
              <p>请设置一个安全的新密码</p>
            </div>
            
            <el-form
              ref="passwordFormRef"
              :model="passwordForm"
              :rules="passwordRules"
              size="large"
              class="auth-form"
              @submit.prevent="resetPassword"
            >
              <el-form-item prop="password">
                <div class="input-wrapper">
                  <label class="input-label">新密码</label>
                  <el-input
                    v-model="passwordForm.password"
                    type="password"
                    placeholder="请输入新密码"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                    class="theme-input"
                  />
                </div>
              </el-form-item>
              
              <el-form-item prop="confirmPassword">
                <div class="input-wrapper">
                  <label class="input-label">确认密码</label>
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                    class="theme-input"
                    @keyup.enter="resetPassword"
                  />
                </div>
              </el-form-item>
              
              <el-form-item>
                <el-button
                  type="primary"
                  size="large"
                  :loading="loading"
                  @click="resetPassword"
                  class="submit-btn theme-button-primary"
                >
                  <span v-if="!loading">
                    <el-icon><Check /></el-icon>
                    重置密码
                  </span>
                  <span v-else>
                    重置中...
                  </span>
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <div class="form-footer">
            <div class="divider">
              <span>或</span>
            </div>
            
            <p class="back-to-login">
              想起密码了？
              <router-link to="/auth/login" class="login-link theme-link">
                返回登录
              </router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {
  Folder,
  Message,
  Lock,
  Right,
  Sunny,
  Moon,
  Key,
  ArrowLeft,
  Check,
  CircleCheck
} from '@element-plus/icons-vue'
import { useThemeStore } from '@/stores/theme'
import TitleBar from '@/components/electron/TitleBar.vue'
import { validators, handleBackendValidationErrors, showFieldErrors } from '@/utils/validation'
import * as authApi from '@/api/modules/auth'

const router = useRouter()
const themeStore = useThemeStore()

// 检查是否在Electron环境
const isElectron = computed(() => {
  return !!(window as any).electronAPI
})

// 表单引用
const emailFormRef = ref<FormInstance>()
const codeFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

// 当前步骤
const currentStep = ref(1)

// 加载状态
const loading = ref(false)
const resendLoading = ref(false)

// 倒计时
const countdown = ref(0)
let countdownTimer: NodeJS.Timeout | null = null

// 邮箱表单
const emailForm = reactive({
  email: ''
})

// 验证码表单
const codeForm = reactive({
  code: ''
})

// 密码表单
const passwordForm = reactive({
  password: '',
  confirmPassword: ''
})

// 邮箱掩码显示
const maskedEmail = computed(() => {
  if (!emailForm.email) return ''
  const [username, domain] = emailForm.email.split('@')
  if (username.length <= 2) return emailForm.email
  const maskedUsername = username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1)
  return `${maskedUsername}@${domain}`
})

// 自定义验证器
const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== passwordForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

// 表单验证规则 - 使用统一的验证规则
const emailRules: FormRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        const error = validators.email(value)
        if (error) {
          callback(new Error(error))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const codeRules: FormRules = {
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码为6位数字', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码只能包含数字', trigger: 'blur' }
  ]
}

const passwordRules: FormRules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: Function) => {
        const error = validators.password(value)
        if (error) {
          callback(new Error(error))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!emailFormRef.value) return

  try {
    const valid = await emailFormRef.value.validate()
    if (!valid) return

    loading.value = true

    // 调用API发送验证码
    await authApi.sendResetCode(emailForm.email)

    ElMessage.success('验证码已发送，请查收邮件')
    currentStep.value = 2
    startCountdown()

  } catch (error: any) {
    console.error('发送验证码失败:', error)
    // 从后端API响应中获取错误信息
    const errorMessage = error.response?.data?.message || error.message || '发送验证码失败，请重试'
    ElMessage.error(errorMessage)
  } finally {
    loading.value = false
  }
}

// 验证验证码
const verifyCode = async () => {
  if (!codeFormRef.value) return

  try {
    const valid = await codeFormRef.value.validate()
    if (!valid) return

    loading.value = true

    // 调用API验证验证码
    await authApi.verifyResetCode(emailForm.email, codeForm.code)

    ElMessage.success('验证码验证成功')
    currentStep.value = 3

  } catch (error: any) {
    console.error('验证验证码失败:', error)
    const errorMessage = error.response?.data?.message || error.message || '验证码错误或已过期'
    ElMessage.error(errorMessage)
  } finally {
    loading.value = false
  }
}

// 重置密码
const resetPassword = async () => {
  if (!passwordFormRef.value) return

  try {
    const valid = await passwordFormRef.value.validate()
    if (!valid) return

    loading.value = true

    // 调用API重置密码
    await authApi.resetPassword(emailForm.email, codeForm.code, passwordForm.password)

    ElMessage.success('密码重置成功，请使用新密码登录')

    // 跳转到登录页面
    setTimeout(() => {
      router.push('/auth/login')
    }, 1500)

  } catch (error: any) {
    console.error('重置密码失败:', error)
    const errorMessage = error.response?.data?.message || error.message || '密码重置失败，请重试'
    ElMessage.error(errorMessage)
  } finally {
    loading.value = false
  }
}

// 重新发送验证码
const resendCode = async () => {
  try {
    resendLoading.value = true

    // 调用API重新发送验证码
    await authApi.sendResetCode(emailForm.email)

    ElMessage.success('验证码已重新发送')
    startCountdown()

  } catch (error: any) {
    console.error('重新发送验证码失败:', error)
    const errorMessage = error.response?.data?.message || error.message || '重新发送失败，请重试'
    ElMessage.error(errorMessage)
  } finally {
    resendLoading.value = false
  }
}

// 返回上一步
const goBack = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer!)
      countdownTimer = null
    }
  }, 1000)
}

// 清理定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style lang="scss" scoped>
// ==================== 主容器 ====================
.auth-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column; // 改为垂直布局，标题栏在顶部，内容在下方
  overflow-x: hidden;
  overflow-y: auto;
}

// ==================== 背景装饰 ====================
.auth-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;

  .bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 25% 25%, var(--theme-primary-bg) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, var(--theme-secondary-bg) 0%, transparent 50%);
    opacity: 0.3;
  }

  .bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      var(--bg-color-primary) 0%,
      var(--bg-color-secondary) 100%
    );
  }
}

// ==================== 内容区域 ====================
.auth-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  flex: 1; // 占据剩余空间
  min-height: 0; // 允许flex收缩

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 520px;
  }

  @media (max-width: 768px) {
    padding: 16px;
    gap: 32px;
  }
}

// ==================== 品牌展示区 ====================
.brand-section {
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media (max-width: 1024px) {
    order: 2;
    text-align: center;
  }
}

.brand-content {
  .brand-logo {
    display: flex;
    align-items: center;
    margin-bottom: 32px;

    @media (max-width: 1024px) {
      justify-content: center;
    }

    .logo-icon {
      font-size: 48px;
      color: var(--theme-primary);
      margin-right: 16px;
    }

    .logo-text {
      font-size: 36px;
      font-weight: 700;
      color: var(--text-color-primary);
      margin: 0;
      background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .brand-description {
    h2 {
      font-size: 32px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 16px 0;
      line-height: 1.2;
    }

    p {
      font-size: 18px;
      color: var(--text-color-secondary);
      margin: 0 0 32px 0;
      line-height: 1.6;
    }
  }

  .security-features {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;

    @media (max-width: 1024px) {
      justify-content: center;
    }

    .feature-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background-color: var(--bg-color-tertiary);
      border-radius: 8px;
      border: 1px solid var(--border-color-light);

      .el-icon {
        font-size: 16px;
        color: var(--theme-primary);
        margin-right: 8px;
      }

      span {
        font-size: 14px;
        color: var(--text-color-primary);
        font-weight: 500;
      }
    }
  }

  .help-info {
    background-color: var(--bg-color-tertiary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color-light);

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 12px 0;
    }

    ul {
      margin: 0;
      padding-left: 16px;

      li {
        font-size: 14px;
        color: var(--text-color-secondary);
        line-height: 1.5;
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

// ==================== 表单区域 ====================
.form-section {
  display: flex;
  justify-content: center;

  @media (max-width: 1024px) {
    order: 1;
  }
}

.form-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 1000px;
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  overflow-y: auto;

  @media (max-width: 768px) {
    padding: 20px 16px;
    border-radius: 12px;
    max-width: 100%;
    max-height: 90vh;
  }

  @media (max-width: 480px) {
    padding: 16px 12px;
    max-height: 85vh;
  }
}

// ==================== 主题切换按钮 ====================
.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;

  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-color-tertiary);
    border: 1px solid var(--border-color-light);
    color: var(--text-color-primary);
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--theme-primary);
      color: white;
      transform: scale(1.05);
    }
  }
}

// ==================== 步骤指示器 ====================
.steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;

    .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      background-color: var(--bg-color-tertiary);
      color: var(--text-color-tertiary);
      border: 2px solid var(--border-color-light);
      transition: all 0.3s ease;
    }

    .step-label {
      font-size: 12px;
      color: var(--text-color-tertiary);
      margin-top: 8px;
      text-align: center;
      transition: all 0.3s ease;
    }

    &.active {
      .step-number {
        background-color: var(--theme-primary);
        color: white;
        border-color: var(--theme-primary);
      }

      .step-label {
        color: var(--theme-primary);
        font-weight: 500;
      }
    }

    &.completed {
      .step-number {
        background-color: var(--color-success);
        color: white;
        border-color: var(--color-success);
      }

      .step-label {
        color: var(--color-success);
      }
    }
  }

  .step-divider {
    width: 40px;
    height: 2px;
    background-color: var(--border-color-light);
    margin: 0 8px;
  }
}

// ==================== 步骤内容 ====================
.step-content {
  .form-header {
    text-align: center;
    margin-bottom: 20px;

    h2 {
      font-size: 22px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 4px 0;
    }

    p {
      font-size: 13px;
      color: var(--text-color-secondary);
      margin: 0;
      line-height: 1.3;

      strong {
        color: var(--theme-primary);
        font-weight: 600;
      }
    }
  }
}

// ==================== 表单样式 ====================
.auth-form {
  .input-wrapper {
    margin-bottom: 16px;

    .input-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-color-primary);
      margin-bottom: 4px;
    }
  }

  .submit-btn {
    width: 100%;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: var(--theme-primary-shadow);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .el-icon {
      margin-right: 6px;
    }
  }
}

// ==================== 验证码相关 ====================
.code-input {
  text-align: center;
  letter-spacing: 4px;
  font-size: 18px;
  font-weight: 600;
}

.code-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;

  .countdown {
    font-size: 12px;
    color: var(--text-color-tertiary);
  }

  .resend-btn {
    font-size: 12px;
    padding: 0;
    height: auto;
  }
}

// ==================== 按钮组 ====================
.button-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;

  .back-btn {
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--border-color-base);
    background-color: var(--bg-color-tertiary);
    color: var(--text-color-secondary);

    &:hover {
      border-color: var(--theme-primary);
      color: var(--theme-primary);
    }

    .el-icon {
      margin-right: 4px;
    }
  }
}

// ==================== 表单底部 ====================
.form-footer {
  margin-top: 16px;
  text-align: center;

  .divider {
    position: relative;
    margin: 16px 0;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--border-color-light);
    }

    span {
      position: relative;
      background-color: var(--bg-color-tertiary);
      padding: 0 12px;
      font-size: 12px;
      color: var(--text-color-tertiary);
    }
  }

  .back-to-login {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin: 0;

    .login-link {
      font-weight: 600;
      text-decoration: none;
      margin-left: 4px;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// ==================== 深度样式覆盖 ====================
:deep(.el-form-item) {
  margin-bottom: 0;

  .el-form-item__error {
    color: var(--color-danger);
    font-size: 12px;
    margin-top: 4px;
  }
}

:deep(.el-input) {
  .el-input__wrapper {
    background-color: var(--bg-color-tertiary);
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    box-shadow: none;
    min-height: 36px;

    &:hover {
      border-color: var(--theme-primary);
    }

    &.is-focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 2px var(--theme-primary-bg);
    }

    &.is-error {
      border-color: var(--color-danger);

      &.is-focus {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
      }
    }
  }

  .el-input__inner {
    height: auto;
    line-height: 1.4;
    color: var(--text-color-primary);
    font-size: 13px;

    &::placeholder {
      color: var(--text-color-tertiary);
    }
  }

  .el-input__prefix {
    color: var(--text-color-tertiary);
  }

  .el-input__suffix {
    color: var(--text-color-tertiary);
  }
}

// ==================== 响应式优化 ====================
@media (max-width: 768px) {
  .auth-content {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
  }

  .form-container {
    max-width: 100%;
  }

  .steps-indicator {
    .step {
      .step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }

      .step-label {
        font-size: 10px;
      }
    }

    .step-divider {
      width: 30px;
    }
  }

  .button-group {
    grid-template-columns: 1fr;
    gap: 8px;

    .back-btn {
      order: 2;
    }

    .submit-btn {
      order: 1;
    }
  }
}

@media (max-width: 480px) {
  .auth-content {
    padding: 12px;
  }

  .form-container {
    padding: 16px 12px;
    border-radius: 8px;
  }

  .brand-content {
    .brand-logo {
      .logo-icon {
        font-size: 40px;
      }

      .logo-text {
        font-size: 28px;
      }
    }

    .brand-description h2 {
      font-size: 24px;
    }

    .security-features {
      .feature-item {
        padding: 8px 12px;

        span {
          font-size: 12px;
        }
      }
    }
  }

  .theme-toggle {
    top: 12px;
    right: 12px;

    .theme-toggle-btn {
      width: 36px;
      height: 36px;
    }
  }
}
</style>
